<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            text-decoration: none;
            list-style: none;
        }
        body{
            background: #f5f5f5;
        }
        .header {
            height: 66px;
            background: white;
        }
        .header .z{
            color: black;
            float: left;
            font-size: 20px;
            margin: 20px 600px 0px 15px;
        }
        .header .nav a{
                float: left;
                width: 42px;
                height: 42px;
                background:yellow;
                text-align: center;
                line-height: 42px;
                border-radius: 50%;
                margin-right: 10px;
                margin-top: 14px;
        }
        .header .y{
            color: black;
            float: right;
            font-size: 14px;
            margin: 20px 10px 0 15px;
        }
        .banner{
            height: 512px;
            width: 1209px;
            margin: 25px auto;
            position: relative;
        }
        .banner .left{
            height: 512px;
            width: 907px;
            float: left;
        }
        .banner .x{
            position: absolute;
            left: 0px;
            bottom: 0px;
            color: #fff;
            width: 907px;
            height: 40px;
            line-height: 40px;
            background-color:#4d4d4d;
        }
        .banner .right{
            width: 292px;
            float: right;
        }
        .banner .right li{
            width: 292px;
            height: 162px;
            margin-bottom: 12px;
            overflow: hidden;
            position: relative;
        }
        .banner .right p{
            position: absolute;
            width: 290px;
            height: 52px;
            color: white;
            background-color:rgba(0, 0, 0, 0.3);
            bottom: 0px;
        }
        .banner .right img{
            width: 290px;
            height: 163px;
        }
        .list{
            width: 1209px;
            height: 36px;
            margin:0px auto;
        }
        select{
            width: 132px;
            height: 36px;
        }
        .con{
            width: 1209px;
            height: 315px;
            margin:25px auto;
        }
        .con img{
            height: 191px;
            width: 290px;
        }
        .con li{
            width: 291px;
            height: 315px;
            background-color: white;
            position: relative;
            float: left;
            margin-right: 11px;
        }
        .con p{
            margin-top: 10px;
        }
        .con span{
            color: grey;
            bottom:0px;
            position: absolute;
        }
        .con .left{
            float: left;
        }
        .con .right1{
            float: left;
            margin-left: 120px;
        }
        .con .right2{
            right: 0px;
        }
        .con .s{
            height: 36px;
            line-height: 36px;
            width: 36px;
            border-radius: 40px;
            display: block;
            text-align: center;
            background: #f8e71c;
            font-size: 20px;
            color:black;
            float: left;
            position: absolute;
            top: 0px;
        }
        .more{
            width: 1209px;
            height: 36px;
            margin: 12px auto 75px auto;
            text-align: center;
            line-height: 36px;
            background:white;
        }
        .cor{
            font-size: 14px;
            color: grey;
            margin: 75px auto 63px auto;
            height: 14px;
            width: 1209px;
        }
        .a{
            width: 1209px;
            height: 61px;
            margin: 0px auto 36px auto;
        }
        .footer{
            height: 14px;
            width: 1209px;
            margin: 0px auto 31px auto;
            color: grey;
        }
    </style>
</head>

<body>
    <div class="header">
        <a class="z" href="">三</a>
            <div class="nav">
                <ul>
                    <li>
                        <a href="">赞</a>
                        <a href="">萌</a>
                        <a href="">哈</a>
                        <a href="">艹</a>
                        <a href="">买</a>
                    </li>
                </ul>
            </div>   
        <a class="y" href="">登录</a>
    </div>
    <div class="banner">
        <img src="images/s003.jpg" alt="" class="left">
        <p class="x">Brand 100:设计成就品牌</p>
        <ul class="right">
            <li>
                <img src="images/s02.jpg" alt="">
                <p>想点亮这个圣诞氛围?试试这个「驯鹿灯」</p>
            </li>
            <li>
                <img src="images/s03.jpg" alt="">
                <p>Designer 100: 100个设计师, 100个故事</p>
            </li>
            <li>
                <img src="images/s04.jpg" alt="">
                <p style="height: 31px;">旧椅子获新生，还比以前更炫酷了</p>
            </li>
        </ul>
    </div>
        <ul class="list">
            <li>
                <select name="" id="">
                    <option value="" >最新</option>
                </select>
                <select name="" id="">
                    <option value="" >最热</option>
                </select>
                <select name="" id="">
                    <option value="" >热议</option>
                </select>
                <select name="" id="">
                    <option value="" >随机</option>
                </select>
            </li>
        </ul>
        <ul class="con">
            <li>
                <img src="images/i01.jpg" alt="">
                <p>用水才能擦去笔记，它只想保护好设计师的创意</p>
                <p>
                    <span class="left">2小时前</span>
                    <span class="right1">122</span>
                    <span class="right2">2</span>
                </p>
            </li>
            <li>
                <img src="images/i02.jpg" alt="">
                <p>马桶刷也要有优雅的姿态</p>
                <p>
                    <span class="left">3小时前</span>
                    <span class="right1">108</span>
                    <span class="right2">7</span>
                </p>
            </li>
            <li>
                <img src="images/i03.jpg" alt="">
                <p>健身也走【科技范】，你以为这仅仅只是个瑜伽垫？</p>
                <p>
                    <span class="left">16小时前</span>
                    <span class="right1">407</span>
                    <span class="right2">11</span>
                </p>
                <a href="" class="s">赞</a>
            </li>
            <li>
                <img src="images/i04.jpg" alt="">
                <p>牙缝清洁怎么办？牙签牙线都过时了，用【刷子】刷吧。</p>
                <p>
                    <span class="left">16小时前</span>
                    <span class="right1">640</span>
                    <span class="right2">16</span>
                </p>
                <a href="" class="s">赞</a>
            </li>
        </ul>
        <ul class="con">
            <li>
                <img src="images/i05.jpg" alt="">
                <p>矮怎么了？照样能够拿到书架顶端的书</p>
                <p>
                    <span class="left">18小时前</span>
                    <span class="right1">534</span>
                    <span class="right2">24</span>
                </p>
                <a href="" class="s">艹</a>
            </li>
            <li>
                <img src="images/i06.png" alt="">
                <p>这简直是一场关于肉体的盛宴，无关设计，无关时尚，无关商业......</p>
                <p>
                    <span class="left">19小时前</span>
                    <span class="right1">1024</span>
                    <span class="right2">23</span>
                </p>
                <a href="" class="s">赞</a>
            </li>
            <li>
                <img src="images/i07.png" alt="">
                <p>中国国际设计节PK世界工业设计大会，那个更棒。</p>
                <p>
                    <span class="left">20小时前</span>
                    <span class="right1">402</span>
                    <span class="right2">10</span>
                </p>
                <a href="" class="s">赞</a>
            </li>
            <li>
                <img src="images/i07.jpg" alt="">
                <p>首届世界工业设计大会在家门口杭州，中国设计师们燥起来</p>
                <p>
                    <span class="left">23小前</span>
                    <span class="right1">303</span>
                    <span class="right2">9</span>
                </p>
                <a href="" class="s">赞</a>
            </li>
        </ul>
        <ul class="con">
            <li>
                <img src="images/i08.jpg" alt="">
                <p>窝在北方的暖炉里，你应该需要这样一个散热阀门？</p>
                <p>
                    <span class="left">1天前</span>
                    <span class="right1">479</span>
                    <span class="right2">11</span>
                </p>
                <a href="" class="s">赞</a>
            </li>
            <li>
                <img src="images/i09.jpg" alt="">
                <p>废纸打造的铅笔，像是一朵朵落入凡间的花</p>
                <p>
                    <span class="left">2天前</span>
                    <span class="right1">533</span>
                    <span class="right2">34</span>
                </p>
                <a href="" class="s">艹</a>
            </li>
            <li>
                <img src="images/i10.jpg" alt="">
                <p>依靠在毯子上，这件事听着就让人舒坦</p>
                <p>
                    <span class="left">2天前</span>
                    <span class="right1">463</span>
                    <span class="right2">19</span>
                </p>
                <a href="" class="s">哈</a>
            </li>
            <li>
                <img src="images/i11.jpg" alt="">
                <p>别笑话虚拟键盘没有实体按键，打字or音乐，它们说变就能变</p>
                <p>
                    <span class="left">2天前</span>
                    <span class="right1">540</span>
                    <span class="right2">44</span>
                </p>
                <a href="" class="s">赞</a>
            </li>
        </ul>
        <p class="more">太快了吧，慢慢来:)</p>
        <p class="cor">合作伙伴</p>
        <div class="a">
            <img src="images/x01.png" alt="">
            <img src="images/x02.png" alt="">
            <img src="images/x03.png" alt="">
            <img src="images/x04.png" alt="">
            <img src="images/x05.png" alt="">
            <img src="images/x06.png" alt="">
            <img src="images/x07.jpg" alt="">
        </div>
        <p class="footer">友情链接</p>
        <p class="footer">
            <a href="" class="footer">
                海报设计丨DRC丨中国工业设计协会丨设计邦丨网易家居丨凤凰家居丨智东西丨友好速搭丨高清图片丨Fotor丨极果丨快站丨新浪众测丨非常设计师网丨腾讯家居
            </a>
        </p>
</body>
</html>